<template>
  <div class="main">
    <div
      id="map"
      style="width: 1920px; height: 90vh; position: absolute; z-index: 1"
    ></div>
    <div style="padding: 24px">
      <div class="bottom dw">
        <div class="b_b">
          <p class="blue1">车辆队列</p>
          <div style="padding: 0 20px; margin-top: 15px;">
            <div
              v-for="(item, index) in 5"
              :key="index"
              @click="carsClick(index)"
              class="aaa"
            >
              <img
                src="../../assets/img/title/car1.webp"
                width="52"
                height="34"
                alt=""
              />
              <p class="nm">{{ index + 1 }}号车</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import fangicon from "../../assets/img/title/fang.png";
import dwicon from "../../assets/img/title/dwicon.png";
import carIcon from "../../assets/img/title/carar.png";
import ZWSJ from "../../components/ZWSJ.vue";
export default {
  components: {
    ZWSJ,
  },
  data() {
    return {
      o_o: "",
      t_t: "",
      bmap: "",
      renwu: "",
      car1: [],
      car2: [],
      zong: "",
      cars: [],
    };
  },
  created() {},
  mounted() {
    this.$api
      .CarsCountCars({
        user_id: localStorage.getItem("user_id"),
      })
      .then((res) => {
        this.o_o = res.data;
      })
      .catch((error) => {});

    this.$api
      .DispatcherTaskFindDispatcherTaskBySy({
        user_id: localStorage.getItem("user_id"),
      })
      .then((res) => {
        this.renwu = res.data;
        localStorage.setItem("dispatcherId", res.data.id);
      })
      .catch((error) => {});
    this.$api
      .AlignmentCarsCountAlignmentCars({
        user_id: localStorage.getItem("user_id"),
      })
      .then((res) => {
        this.t_t = res.data;
      })
      .catch((error) => {});

    this.$api
      .AlignmentCarsFindAlignmentCarsByZN({
        user_id: localStorage.getItem("user_id"),
      })
      .then((res) => {
        this.car1 = res.data;
      })
      .catch((err) => {});

    this.$api
      .CarTaskFindCarTaskByZTYS({
        user_id: localStorage.getItem("user_id"),
      })
      .then((res) => {
        this.zong = res.data;
      });
    this.$api
      .AlignmentCarsFindAlignmentCarsByState({
        user_id: localStorage.getItem("user_id"),
        dispatcherId: localStorage.getItem("dispatcherId"),
      })
      .then((res) => {
        this.car2 = res.data;
      })
      .catch((error) => {});
    this.test();
  },
  methods: {
    carsClick(index) {
      const makers = this.bmap.getOverlays();

      for (let index = 0; index < makers.length; index++) {
        if (makers[index].Ma == 5) {
          this.bmap.removeOverlay(makers[index]);
        }
      }

      let caIcon = new BMap.Icon(carIcon, new BMap.Size(36, 36));
      var point11 = new BMap.Point(
        this.cars[index].lng + this.cars[index].baidu_lng_xz,
        this.cars[index].lat + this.cars[index].baidu_lat_xz
      );

      let marker11 = new BMap.Marker(point11, {
        icon: caIcon,
      });
      this.bmap.addOverlay(marker11);
      this.bmap.centerAndZoom(
        new BMap.Point(
          this.cars[index].lng + this.cars[index].baidu_lng_xz,
          this.cars[index].lat + this.cars[index].baidu_lat_xz
        ),
        18
      );

      let infoWin =
        `<div style="padding:0px 20px 15px 20px">` +
        `<span style="line-height:50px">车牌号：` +
        this.cars[index].name +
        `</span>` +
        `<br/>` +
        `<span style="margin-right:40px;line-height:40px">速度：` +
        `</span>` +
        this.cars[index].speed +
        `KM/H</span>` +
        `<br/>` +
        `<span style="margin-right:40px;line-height:40px">正反转：` +
        `</span><br/>` +
        `地址信息：` +
        this.cars[index].info +
        "</div>";
      marker11.addEventListener("click", () => {
        var opts = {
          width: 350, // 信息窗口宽度
          height: 200, // 信息窗口高度
          title: "车辆信息", // 信息窗口标题
        };
        var infoWindow = new BMap.InfoWindow(infoWin, opts); // 创建信息窗口对象
        this.bmap.openInfoWindow(infoWindow, point11); // 打开信息窗口
      });
    },
    async test() {
      this.bmap = new BMap.Map("map");
      this.bmap.centerAndZoom(new BMap.Point(117.41348, 31.898758), 14);
      var point = new BMap.Point(117.413272 + 0.005, 31.897451);
      var point1 = new BMap.Point(117.413272, 31.897451 + 0.003);
      let fficon = new BMap.Icon(fangicon, new BMap.Size(36, 44));
      let pdwicon = new BMap.Icon(dwicon, new BMap.Size(36, 44));
      let caIcon = new BMap.Icon(carIcon, new BMap.Size(36, 36));
      // var marker = new BMap.Marker(point, { icon: pdwicon }); // 创建标注
      // this.bmap.addOverlay(marker);
      // var marker1 = new BMap.Marker(point1, { icon: fficon }); // 创建标注
      // this.bmap.addOverlay(marker1);
      /**
       *
       * 添加小车
       * 添加小车点击事件
       *
       */

      let carsList = [
        {
          vid: "16908339",
          vkey: "13c74e6f59ecbf55ccdd9309bf3c01dc",
        },
        {
          vid: "16908337",
          vkey: "4942f6c15fe5fd48e07331934f6cdfdf",
        },
        {
          vid: "16908331",
          vkey: "eb2cb3f50c9905080b8a30ae34db218d",
        },
        {
          vid: "16908199",
          vkey: "271effe9193a6d24e8145f8daf9742ec",
        },
        {
          vid: "16908336",
          vkey: "033219463281777376bcf9305d1ae397",
        },
      ];

      for (const key in carsList) {
        await this.$axios
          .post(
            "http://111.35.18.61:89/gpsonline/GPSAPI?version=1&method=loadLocation&vid=" +
              carsList[key].vid +
              "&vKey=" +
              carsList[key].vkey
          )
          .then((res) => {
            res.data.locs[0].value = parseInt(key) + 1 + "号车";
            this.cars.push(res.data.locs[0]);

            let carInfo = res.data.locs[0];
            var point11 = new BMap.Point(
              carInfo.lng + carInfo.baidu_lng_xz,
              carInfo.lat + carInfo.baidu_lat_xz
            );

            let marker11 = new BMap.Marker(point11, {
              icon: caIcon,
            });
            this.bmap.addOverlay(marker11);
            let infoWin =
              `<div style="padding:0px 20px 15px 20px">` +
              `<span style="line-height:50px">车牌号：` +
              carInfo.name +
              `</span>` +
              `<br/>` +
              `<span style="margin-right:40px;line-height:40px">速度：` +
              `</span>` +
              carInfo.speed +
              `KM/H</span>` +
              `<br/>` +
              `<span style="margin-right:40px;line-height:40px">正反转：` +
              `</span><br/>` +
              `地址信息：` +
              carInfo.info +
              "</div>";
            marker11.addEventListener("click", () => {
              var opts = {
                width: 350, // 信息窗口宽度
                height: 200, // 信息窗口高度
                title: "车辆信息", // 信息窗口标题
              };
              var infoWindow = new BMap.InfoWindow(infoWin, opts); // 创建信息窗口对象
              this.bmap.openInfoWindow(infoWindow, point11); // 打开信息窗口
            });
          });
      }

      /**
       *
       * 在地图上标记折线
       *
       *
       */
      var polyline = new BMap.Polyline(
        [
          new BMap.Point(117.322331, 31.934217),
          new BMap.Point(117.325529, 31.931183),
          new BMap.Point(117.329805, 31.931869),
          new BMap.Point(117.329212, 31.923951),
          new BMap.Point(117.367947, 31.903675),
          new BMap.Point(117.365576, 31.896931),
          new BMap.Point(117.373409, 31.893252),
          new BMap.Point(117.381026, 31.896441),
          new BMap.Point(117.397914, 31.898096),
          new BMap.Point(117.413272 + 0.005, 31.897451),
          new BMap.Point(117.475416, 31.898194),
        ],
        { strokeColor: "#195bff", strokeWeight: 6, strokeOpacity: 1 }
      );

      var polyline1 = new BMap.Polyline(
        [
          new BMap.Point(117.322331, 31.934217 + 0.005),
          new BMap.Point(117.325529 + 0.005, 31.931183 + 0.005),
          new BMap.Point(117.329805 + 0.005, 31.931869 + 0.005),
          new BMap.Point(117.329212 + 0.005, 31.923951 + 0.005),
          new BMap.Point(117.367947 + 0.005, 31.903675 + 0.005),
          new BMap.Point(117.365576 + 0.005, 31.896931 + 0.005),
          new BMap.Point(117.373409 + 0.005, 31.893252 + 0.005),
          new BMap.Point(117.381026 + 0.005, 31.896441 + 0.005),
          new BMap.Point(117.397914 + 0.005, 31.898096 + 0.005),
          new BMap.Point(117.413272 + 0.005 + 0.005, 31.897451 + 0.005),
          new BMap.Point(117.475416 + 0.005, 31.898194 + 0.005),

          new BMap.Point(117.475416 + 0.005, 31.898194 - 0.005),

          new BMap.Point(117.413272 + 0.005 + 0.005, 31.897451 - 0.005),
          new BMap.Point(117.413272 - 0.005, 31.897451 - 0.005),
          new BMap.Point(117.381026 - 0.005, 31.896441 - 0.005),
          new BMap.Point(117.373409 - 0.005, 31.893252 - 0.005),
          new BMap.Point(117.365576 - 0.005, 31.896931 - 0.005),
          new BMap.Point(117.367947 - 0.005, 31.903675 - 0.005),
          new BMap.Point(117.329212 - 0.005, 31.923951 - 0.005),
          new BMap.Point(117.329805 - 0.005, 31.931869 - 0.005),
          new BMap.Point(117.325529 - 0.005, 31.931183 - 0.005),
          new BMap.Point(117.322331 - 0.005 - 0.005, 31.934217 - 0.005),
          new BMap.Point(117.322331, 31.934217 + 0.005),
        ],
        { strokeColor: "red", strokeWeight: 2, strokeOpacity: 1 }
      );

      var polyline2 = new BMap.Polyline(
        [
          new BMap.Point(117.407954 + 0.005, 31.901191),
          new BMap.Point(117.415571 + 0.006, 31.901436),

          new BMap.Point(
            117.414062 + 0.001 + 0.001 + 0.006,
            31.898309 - 0.0005
          ),
          new BMap.Point(117.407954 + 0.004, 31.898309 - 0.0005),
          new BMap.Point(117.407954 + 0.005, 31.901191),
        ],
        { strokeColor: "red", strokeWeight: 4, strokeOpacity: 1 }
      );
      this.bmap.addOverlay(polyline); // 添加折线
      this.bmap.addOverlay(polyline1);
      this.bmap.addOverlay(polyline2);
      // 通过地图样式id设置地图样式
      this.bmap.setMapStyleV2({
        styleId: "dd643055a178f7bec8633f71bcb20175",
      });
      this.bmap.enableScrollWheelZoom(true);
    },
  },
};
</script>
<style scoped>
.main {
  background-size: 100% 100%;
  width: 1920px;
  height: 910px;
}

.dw {
  position: relative;
  z-index: 999;
}

.aaa {
  display: inline-block;
  text-align: center;
  width: 83px;
  margin: 0px 8px 24px 8px;

  cursor: pointer;
}

.nm {
  height: 12px;
  font-size: 16px;
  font-family: San Francisco Display;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
}

.blue2 {
  line-height: 35px;
  font-size: 16px;
  color: #00ffff;
}

.blue2 > span {
  color: #ffffff;
}

.blue {
  line-height: 35px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #00ffff;
  margin-left: 20px;
}

.blue1 {
  line-height: 40px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #00ffff;
  text-align: center;
}

.top {
  background: url("../../assets/img/title/cl1.webp") no-repeat;
  background-size: 100% 100%;
  width: 300px;
  height: 280px;
}

.con {
  width: 280px;
  margin: 20px 0;
}

.c_b {
  display: inline-block;
  background: url("../../assets/img/title/cl2.webp") no-repeat;
  background-size: 100% 100%;
  width: 280px;
  height: 190px;
  margin-right: 8px;
}

.b_b {
  display: inline-block;
  background: url("../../assets/img/title/cldl.png") no-repeat;
  background-size: 100% 100%;
  width: 240px;
  height: 850px;
  margin-right: 10px;
  float: left;
}
</style>
